<template>
  <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
  </van-nav-bar>
  <van-cell center>
    <template #title>
      <van-button color="#CE9F57" size="mini" @click="cqyz"
        >长期医嘱</van-button
      >
      <van-button color="#40A6FD" class="mlaaa" @click="lsyz" size="mini"
        >临时医嘱</van-button
      >
    </template>
  </van-cell>
  <div v-show="yzsx === '1'">
    <!-- 表头 -->
    <van-row class="mlr">
      <van-col v-for="(item, index) in cqheader" :key="index" :span="item.span">
        <div class="header">
          <div class="headert">
            <span class="headertitle">{{ item.title }}</span>
          </div>
          <div class="headerb" v-if="item.children">
            <span
              class="headerbtd"
              v-for="(child, childIndex) in item.children"
              :key="childIndex"
              >{{ child.text }}</span
            >
          </div>
        </div>
      </van-col>
    </van-row>
    <!-- 表内容 -->
    <van-row
      class="mlr focsrow"
      v-for="(item, index) in advicelist"
      :key="index"
    >
      <van-col span="4">
        <div class="headerb">
          <span class="headerbtd">{{ item.orderdate }}</span>
          <span class="headerbtd">{{ item.ordertime }}</span>
        </div>
      </van-col>
      <van-col span="4" class="yztxt" :class="item.groupFlag">
        <div>
          {{ item.orderContent }}
          {{ item.dosage }}
          {{ item.usage }}
          {{ item.frequency }}
          {{ item.remark }}
        </div>
      </van-col>
      <van-col span="4">
        <div class="headerbtd">{{ item.doctor }}</div>
      </van-col>
      <van-col span="4">
        <div class="headerb">
          <span class="headerbtd">{{ item.nurse }}</span>
          <span class="headerbtd">{{ item.executeTime }}</span>
        </div>
      </van-col>
      <van-col span="4">
        <div class="headerb">
          <span class="headerbtd">{{ item.stopdate }}</span>
          <span class="headerbtd">{{ item.stopTime }}</span>
        </div>
      </van-col>
      <van-col span="4">
        <div class="headerb">
          <span class="headerbtd">{{ item.stopDoctor }}</span>
          <span class="headerbtd">{{ item.stopNurse }}</span>
        </div>
      </van-col>
    </van-row>
  </div>
  <div v-show="yzsx === '2'">
     <!-- 临时表头 -->
    <van-row class="mlr">
      <van-col v-for="(item, index) in lsheader" :key="index" :span="item.span">
        <div class="header">
          <div class="headert">
            <span class="headertitle">{{ item.title }}</span>
          </div>
          <div class="headerb" v-if="item.children">
            <span
              class="headerbtd"
              v-for="(child, childIndex) in item.children"
              :key="childIndex"
              >{{ child.text }}</span
            >
          </div>
        </div>
      </van-col>
    </van-row>
    <!-- 表内容 -->
    <van-row
      class="mlr focsrow"
      v-for="(item, index) in advicelist"
      :key="index"
    >
      <van-col span="5">
        <div class="headerb">
          <span class="headerbtd">{{ item.orderdate }}</span>
          <span class="headerbtd">{{ item.ordertime }}</span>
        </div>
      </van-col>
      <van-col span="5" class="yztxt" :class="item.groupFlag">
        <div>
          {{ item.orderContent }}
          {{ item.dosage }}
          {{ item.usage }}
          {{ item.frequency }}
          {{ item.remark }}
        </div>
      </van-col>
      <van-col span="4">
        <div class="headerbtd">{{ item.doctor }}</div>
      </van-col>
      <van-col span="5">
        <div class="headerb">
          <span class="headerbtd">{{ item.nurse }}</span>
          <span class="headerbtd">{{ item.executeTime }}</span>
        </div>
      </van-col>
      <van-col span="5">
        <div class="headerb">
          <span class="headerbtd">{{ item.stopDoctor }}</span>
          <span class="headerbtd">{{ item.stopNurse }}</span>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { reactive, ref, onMounted } from "vue";
import { getadvicelist } from "@/api/advice";
const router = useRouter();
function onClickLeft() {
  //返回上一页
  router.back();
}

const cqheader = reactive([
  {
    title: "开始",
    span: 4,
    children: [
      {
        text: "日期",
      },
      {
        text: "时间",
      },
    ],
  },
  {
    title: "长期医嘱",
    span: 4,
  },
  {
    title: "医师签名",
    span: 4,
  },
  {
    title: "执行",
    span: 4,
    children: [
      {
        text: "护士",
      },
      {
        text: "时间",
      },
    ],
  },
  {
    title: "停止",
    span: 4,
    children: [
      {
        text: "日期",
      },
      {
        text: "时间",
      },
    ],
  },
  {
    title: "签名",
    span: 4,
    children: [
      {
        text: "医生",
      },
      {
        text: "护士",
      },
    ],
  },
]);
const selectitem = JSON.parse(localStorage.getItem("selectitem"));
console.log(selectitem);
// 获取医嘱列表
const advicelist = ref([]);
let yzsx = ref("1"); // 1:长期医嘱, 2:临时医嘱
onMounted(() => {
  getlist();
});
function getlist() {
  getadvicelist({
    zyh: selectitem.zyh,
    // zyh: "20250037",
    yzsx: yzsx.value,
  }).then((res) => {
    if (res.code == 0) {
      advicelist.value = res.data;
    } else {
      showNotify({ type: "warning", position: "bottom", message: res.msg });
    }
  });
}
function cqyz() {
  yzsx.value = "1";
  getlist();
}
function lsyz() {
  yzsx.value = "2";
  getlist();
}
const lsheader = reactive([
  {
    title: "开始",
    span: 5,
    children: [
      {
        text: "日期",
      },
      {
        text: "时间",
      },
    ],
  },
  {
    title: "临时医嘱",
    span: 5,
  },
  {
    title: "医师签名",
    span: 4,
  },
  {
    title: "执行",
    span: 5,
    children: [
      {
        text: "护士",
      },
      {
        text: "时间",
      },
    ],
  },
  {
    title: "签名",
    span: 5,
    children: [
      {
        text: "医生",
      },
      {
        text: "护士",
      },
    ],
  },
]);
</script>

<style scoped>
/* 基础样式重置 */
.van-col {
  background-color: #fff;
  border: 1px solid #eee;
  box-sizing: border-box;
}

/* 标题区域优化 */
.header {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.headertitle {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  margin-bottom: 4px;
  display: block;
}

/* 子标题容器优化 */
.headerb {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  border-top: 1px solid #eee;
}

.headerbtd {
  flex: 1;
  min-width: 60px;
  font-size: 12px;
  color: #666;
  padding: 4px 0;
  border-right: 1px solid #eee;
  text-align: center;
}

.headerbtd:last-child {
  border-right: none;
}

/* 按钮区域优化 */
.van-cell {
  padding: 12px 16px;
  background: #f8f9fa;
}

.van-button {
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  height: auto;
  line-height: 1.5;
}

.mlaaa {
  margin-left: 8px;
}

/* 内容区域优化 */
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  font-size: 14px;
  color: #444;
  border-radius: 4px;
  margin: 4px;
}

/* 导航栏优化 */
.van-nav-bar {
  border-bottom: 1px solid #eee;
}

.van-nav-bar__title {
  font-weight: 500;
  color: #333;
}
.mlr {
  margin-left: 16px;
  margin-right: 16px;
}
.focsrow {
  cursor: pointer;
}
.focsrow:hover .van-col {
  background-color: #ba85ff;
  color: white;
}
.focsrow:hover .headerbtd {
  color: white;
}
/*同组标记 begin*/
.tz-start,
.tz-center,
.tz-stop {
  position: relative;
}
.tz-start::before,
.tz-center::before,
.tz-stop::before {
  position: absolute;
  content: "";
  right: 5px;
  width: 5px;
  border-right: 1px solid #000000;
}
.tz-start::before {
  bottom: -7px;
  top: 14px;
  border-top: 1px solid #000000;
}
.tz-center::before {
  bottom: -7px;
  top: -7px;
}
.tz-stop::before {
  bottom: 14px;
  top: -7px;
  border-bottom: 1px solid #000000;
}
/*同组标记 end*/
.yztxt{
   line-height: 24px;
   padding-left: 15px;
}
</style>
